<template>
    <div>
        <!-- 面包屑导航 -->
       <breadcrumb :showtitle='showtitle' :title="title" :breadcrumbList="breadcrumbList"></breadcrumb>
       <!-- 二级菜单 -->
       <div v-if='show==1' class="expend-box">
           <div  class="expend-item" v-for="(item,index) in menudata" :key="index">
               <div class="title"><img src="@/assets/css/yingxiao/椭圆 2.png" alt=""> <span class="name"> {{item.resname}}</span></div>
               <div  @click="handle(val)"  v-for="val in item.data" :key="val.id" class="expend-item-children">
                   <img style="height:56px;width:56px"  src="@/assets/css/yingxiao/矢量智能对象(1).png" alt="">
                   <span>{{val.resname}}</span>
               </div>
           </div>
       </div>
       <div v-if='show==2' class="expend-box">
           <div>
                 <span>显示中的课程</span>
                 <div class="expend-kecheng">
                      <div  v-for="(item,index) in fenleilist" :key="index" class="expend-kechengitem">
                          <div class="top">
                             {{item.name}}
                          </div>
                          <div class="bottom">
                              <el-button @click="detitemfenlei(item)">删除</el-button>
                              <el-button @click="edititemfenlei(item)" class="addbtn">编辑</el-button>
                          </div>
                     </div>
                      <div @click="addkecheng" class="expend-kechengitem list">
                           <span>+</span>
                           <span>点击添加课程分类</span>
                     </div>
                 </div>

           </div>
           <el-dialog
             title="添加分类"
             :visible.sync="addshow"
             width="20%"
             >
             <el-form ref="form" :model="form" label-width="80px">
                 <el-form-item label="分类名称:">
                   <el-input v-model="form.name"></el-input>
                 </el-form-item>
             </el-form>
             <hr>
             <el-row type="flex">
               <el-button  @click="detfenlei">取 消</el-button>
               <el-button class="addbtn" type="primary" @click="addfenlei">确 定</el-button>
             </el-row>
           </el-dialog>
       </div>
       <div v-if="show == 3">
           <kecheng></kecheng>
       </div>
        <div v-if="show == 4">
           <wenjuan></wenjuan>
       </div>
    </div>
</template>
<script>
import breadcrumb from "@/components/breadcrumb"
import {getkechenglist,addfenlei,detfenleikey,editfenlei} from "@/api/expend/index.js"
import {mapGetters,mapState,mapMutations } from "vuex"
import kecheng from  "./compoents/kecheng.vue"
import wenjuan from "./compoents/wenjuan"
export default {
    name:'expend',
    data(){
        return {
            fenleilist:[],//显示分类列表
            conceal:[],//隐藏的分类列表
            form :{
                identification:'',
                name:''
            },
            addshow:false,//添加分类的弹窗
            show:1,
            title:'',
            showtitle:false,//面包屑相关
            menudata:[],
            breadcrumbList:[{name:'扩展管理'}]
        }        
    },
    components:{
        breadcrumb,
        kecheng,
        wenjuan

    },
    methods:{
       ...mapMutations(['getkechengclassify']),
       async handle(val){
           console.log(val);
             if(val.resname==="分类管理") {
                 this.getkechenglist()
                this.show = 2 ;
                this.breadcrumbList = [{name:'扩展管理'},{name:'商学院管理'}]
                this.showtitle = true
                this.title='分类管理'
             }
             if(val.resname==="课程管理"){
                  this.show = 3 ;
             }
              if(val.resname==="问卷调查管理"){
                  this.show = 4 ;
             }
        },
        //获取分类列表
        async getkechenglist(){
               const data = await  getkechenglist({identification:this.userInfo.identification})
               this. getkechengclassify(data.data)
               this.fenleilist = data.data
        },
        //添加分类
        addkecheng(){
               this.form ={
                identification:'',
                name:''
            },
            this.form.identification=this.userInfo.identification //初始化赋值
            this.addshow = true
        }, 
        // 添加分类确认
        async addfenlei(){
            if(this.form.id){
                await editfenlei(this.form)
                this.addshow = false
            }else{
               await addfenlei(this.form)
               this.addshow = false
            }
            await this.getkechenglist()
        },
        // 添加分类关闭按钮
        detfenlei(){
            this.form = {
                identification:'',
                name:''
            },
            this.form.identification=this.userInfo.identification //初始化赋值
            this.addshow = false
        },
        //删除分类
         detitemfenlei(val){
            var list = {}
            list.id = val.id
            this.$confirm('是否删除当前课程', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async() => {
             await detfenleikey(list)
             await this.getkechenglist()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        },
        // 编辑分类
        edititemfenlei(val){
            this.form.name = val.name
            this.form.id = val.id
            this.addshow = true
        }
    },
    computed: {
     ...mapGetters(['meunlist']),
     ...mapState(['userInfo'])   
  },
    mounted(){
        this.getkechenglist() //获取分类列表
        this.form.identification=this.userInfo.identification //初始化赋值
        this. menudata= this.meunlist.find(item=>item.resname == '扩展管理').data
    }
}
</script>
<style lang="less" scoped>
.expend-box {
    padding: 20px;
    .expend-item {
        flex-wrap: wrap;
        display: flex;
        .title {
            display: flex;
            align-items: center;
            width: 100%;
            img {
                vertical-align:middle
            }
            .name {
                    margin-top: -9px;
                vertical-align: middle;
            }
        }
    }
    .expend-item-children {
        color: #333333;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100px;
        width: 100px;
        margin-left: 20px;
        display: flex;
    }
    .expend-kecheng {
        flex-wrap: wrap;
        display:flex
      
    }
      .expend-kechengitem {
        margin-bottom: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          border-radius: 10px;
          height: 150px;
          width: 23%;
          background-color: #F2F9F9;
          margin-left: 10px;
          border: 1px dashed #CCCCCC;
          .top {
              padding-top: 19px;
          }
          .bottom {
              padding-bottom: 19px;
          }

        }
        .list {
            cursor: pointer;
            border: 1px dashed #CCCCCC;
            color: #CCCCCC;
            height: 150px;
            width: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }
      hr {
        opacity: 0.5;
        width: 108%;
        margin-top: 80px;
        margin-left: -4%;
        margin-bottom: 15px;
        color: #999;
      }
      .el-button   {
          width: 100px;
          height: 36px;
      }
      .el-button {
      color: #F56C6C; 
      border-color: #F56C6C;
    }
}
</style>